<template>
    <div>
        <nut-tabs v-model="selMode">
            <nut-tab-pane title="扫码定箱" pane-key="扫码定箱">
                <div class="scanArea">
                    <IconFont name="scan" size="50" />
                    <p style="margin-left:40px">请扫描设备条码</p>
                </div>
            </nut-tab-pane>
            <nut-tab-pane title="选择定箱" pane-key="选择定箱">
                <nut-elevator :index-list="deviceList" :height="400" @click-item="clickItem">
                    <template #default="{ item }">
                        <view style="display: flex; flex-direction: row; align-items: center">
                            <nut-space>
                                <IconFont name="play-double-back" size="30" v-if="item.direction == '左舵'" />
                                <IconFont name="play-double-forward" size="30" v-else />
                                <view>{{ item.name }}</view>
                                <view>{{ item.direction }}</view>
                            </nut-space>
                        </view>
                    </template>
                </nut-elevator>
            </nut-tab-pane>
        </nut-tabs>
    </div>
</template>
<script setup lang="js">
import {
    ref,
    onUnmounted,
} from 'vue';
import { getDevices } from '@/api/devices';
import { IconFont } from '@nutui/icons-vue'
import router from '@/router/index'
const selMode = ref('扫码定箱')
const devices = getDevices();
// { category: '中控', code: '969SA HS00A', direction: '左舵' }
// 以category分组，title 为category list 为device item 并增加name和id   name 为code  id 为code，获得分组的数组


const deviceList = devices.reduce((acc, cur) => {
    const category = cur.category;
    const item = acc.find((item) => item.title === category);
    if (item) {
        item.list.push({
            ...cur,
            name: cur.code,
            id: cur.code
        });
    } else {
        acc.push({
            title: category,
            list: [{
                ...cur,
                name: cur.code,
                id: cur.code
            }]
        });
    }
    return acc;
}, []);
const ry = window.cordova.plugins.RyBridge;
const barcodeListener = {
    success: (result) => {
        const device = devices.find((device) => device.code === result.barcodeData);
        if (device) {
            router.push({
                name: 'device-scan',
                query: {
                    code: device.code,
                    category: device.category,
                    direction: device.direction
                }
            });
        } else {
            navigator.vibrate(300)
            alert('未找到设备' + result.barcodeData);
        }
    },
    error: (error) => {
        console.log(error);
    }
}
const clickItem = (key, item) => {
    router.push({
        name: 'device-scan',
        query: {
            category: item.category,
            code: item.code,
            direction: item.direction
        }
    });
}
ry.barcodeDeviceReady(() => {
    ry.addBarcodeEventListener(barcodeListener);
}, () => { });
onUnmounted(() => {
    console.log('remove barcode listener ' + barcodeListener.callbackId);
    ry.removeBarcodeEventListener(barcodeListener);
});
</script>
<style lang="scss" scoped>
:root {
    --nut-elevator-list-item-bars-inner-item-font-size: 20px;
}

.scanArea {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 20px;
    color: #666;
}
</style>